<template>
  <div class="app2">
    <!-- LOGIN字符 -->
    <div class="enterLoginClass" ref="domEnterLoginBorder">
      <!-- 字符LOGIN -->
      <div @click="enterLogin" class="loginingBox">
        <span v-show="logining">LOGIN</span>
      </div>
      <!-- 两个覆盖的登录注册表单 -->
      <div v-show="!logining" class="Box">
        <!-- 登录模块 -->
        <div class="loginBox">
          <div class="loginModule" ref="domSwitchRegister">
            <div class="webHeader">
              <div style="user-select: none">LOGIN</div>
              <div class="iconBox">
                <i class="el-icon-top-left" @click="returnEnter"></i>
                <i class="el-icon-refresh-right" @click="resetLogin"></i>
              </div>
            </div>
            <div class="item">
              <input type="text" v-model="uId" required />
              <label>Phone/Email/StuID/UID</label>
            </div>
            <div class="item">
              <input type="password" v-model="uPassword" required />
              <label>PassWord</label>
            </div>
            <div class="loginButtonBox">
              <button @click="onSubmit" class="loginButton">
                LOGIN <span></span><span></span><span></span><span></span>
              </button>
            </div>
            <div class="switchBox">
              <label @click="switchRetrievePwd">
                <span>Forget Password</span></label
              >
              <label @click="switchRegister"><span>To Register</span></label>
            </div>
          </div>
        </div>

        <!-- 注册模块 -->
        <div class="registerBox">
          <div class="registerModule" ref="domSwitchLogin">
            <div class="webHeader">
              <div style="user-select: none">REGISTER</div>
              <div class="iconBox">
                <i class="el-icon-top-left" @click="returnLogin"></i>
                <i class="el-icon-refresh-right" @click="resetRegister"></i>
              </div>
            </div>
            <transition>
              <div class="item" v-show="!lostPwd">
                <input type="text" v-model="registerEmail" required />
                <label>Email/Phone</label>
              </div>
            </transition>
            <transition>
              <div class="item" v-show="!lostPwd">
                <input type="Password" v-model="registerPassword" required />
                <label>Password</label>
              </div>
            </transition>
            <transition>
              <div class="item" style="flex-direction: row" v-show="!lostPwd">
                <input
                  type="text"
                  v-model="captcha"
                  style="width: 35%; position: relative; left: 7%"
                  required
                />
                <label style="position: relative; left: -29.5%">Captcha</label>
                <div style="width: 50%">
                  <button
                    type="button"
                    class="register-email-button"
                    size="small"
                    @click="getEmailCapture"
                    :class="{ disabledEmailButton: regEmailisOk }"
                  >
                    <span>{{ CAPTURE }}</span>
                  </button>
                </div>
              </div>
            </transition>

            <div
              class="loginButtonBox"
              style="position: absolute; top: 70%; height: 12.5%"
            >
              <button
                type="submit"
                @click="onRegister"
                class="loginButton"
                style="height: 100%"
              >
                Register<span></span><span></span><span></span><span></span>
              </button>
            </div>
          </div>
        </div>

        <!-- 找回密码模块 -->
        <div class="retrievePwdBox">
          <div class="retrievePwdModule" ref="domRetrievePwdModule">
            <div class="webHeader">
              <div style="user-select: none">LostPwd</div>
              <div class="iconBox">
                <i class="el-icon-top-left" @click="returnLogin2"></i>
                <i class="el-icon-refresh-right" @click="resetRetrievePwd"></i>
              </div>
            </div>
            <!-- 验证码校验 -->
            <transition>
              <div class="item" v-show="!lostPwd">
                <input type="text" v-model="retrieveID" required />
                <label>Email/Phone</label>
              </div>
            </transition>

            <transition>
              <div class="item" style="flex-direction: row" v-show="!lostPwd">
                <input
                  type="text"
                  v-model="retrieveCapture"
                  style="width: 35%; position: relative; left: 7%"
                  required
                />
                <label style="position: relative; left: -29.5%">Captcha</label>
                <div style="width: 50%">
                  <button
                    class="register-email-button"
                    size="small"
                    @click="getEmailCapture2"
                    :class="{ disabledEmailButton: regEmailisOk }"
                    type="button"
                  >
                    <transition>
                      <span v-show="!lostPwd">{{ CAPTURE }}</span>
                    </transition>
                  </button>
                </div>
              </div>
            </transition>

            <!-- 新密码输入 -->
            <transition>
              <div class="item" v-show="!lostPwd">
                <input type="Password" v-model="initPwd" required />
                <label v-show="!lostPwd">NewPwd</label>
              </div>
            </transition>

            <transition>
              <div class="item" v-show="!lostPwd">
                <input type="Password" v-model="retrievePwd" required />
                <label v-show="!lostPwd">ConfirmPwd</label>
              </div>
            </transition>

            <div
              class="loginButtonBox"
              style="position: absolute; top: 75%; height: 12.5%"
            >
              <button
                @click="toNewPwd"
                class="loginButton-Confirm"
                style="height: 100%"
              >
                Confirm<span></span><span></span><span></span><span></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 获取所有的用户 -->
  <!-- <button @click="getAllUsers">获取所有用户</button> -->
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import webApi from "../api";
import { ElMessage, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { watch } from "vue-demi";

export default {
  setup() {
    const router = useRouter();

    const domEnterLoginBorder = ref(null);
    const domSwitchRegister = ref(null);
    const domSwitchLogin = ref(null);
    const domRetrievePwdModule = ref(null);

    const state = reactive({
      //登录参数
      uId: "",
      uPassword: "",

      //注册参数
      registerPhone: "",
      registerEmail: "",
      registerPassword: "",
      captcha: "",
      regEmailisOk: false,
      // regEmailisOk2: false,

      //找回密码参数
      retrieveID: "",
      retrieveCapture: "",
      initPwd: "",
      retrievePwd: "",
      CAPTURE: "CAPTCHA",
      // CAPTURE2: "CAPTCHA",

      logining: true,

      //翻转动画划入参数
      lostPwd: true,
    });

    // 邮箱正则验证;
    const emailCheck = function emailCheck(val) {
      let email = val;
      let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (reg.test(email)) {
        return true;
      } else {
        return false;
      }
    };

    // 11位手机号1开头正则验证
    const phoneCheck = function checkMobile(str) {
      var re = /^1\d{10}$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    };

    //注册账号格式验证
    const registerCheck = function registerCheck(id) {
      if (emailCheck(id) || phoneCheck(id)) {
        return true;
      } else {
        return false;
      }
    };

    //验证密码格式
    const pwdCheck = function pwdCheck(str) {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
      if (reg.test(str)) {
        return true;
      } else {
        return false;
      }
    };

    watch(
      () => state.registerEmail,
      (id) => {
        if (!registerCheck(id)) {
          // ElNotification({
          //   title: "Error",
          //   message: "This is an error message",
          //   type: "error",
          // });
        }
      }
    );

    //入口动画切换
    const enterLogin = () => {
      state.logining = false;
      domEnterLoginBorder.value.style.width = "80%";
      // domEnterLoginBorder.value.style.height = "55%";
      domEnterLoginBorder.value.style.height = "414.48px";
      setTimeout(() => {
        domSwitchRegister.value.style.opacity = "1";
        domEnterLoginBorder.value.style.border = "0px solid white";
      }, 500);
    };

    //登录请求
    const onSubmit = () => {
      if (state.uId == "") {
        ElNotification({
          title: "Info",
          message: "Account number cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (state.uPassword == "") {
        ElNotification({
          title: "Info",
          message: "Password cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else {
        webApi
          .login(state.uId, state.uPassword)
          .then((data) => {
            var token = data.data.data;
            window.localStorage.setItem("userToken", token);
            console.log(data);
            if (data.data.code == "OK") {
              router.push("/");
              ElMessage({
                showClose: true,
                message: "登录成功.",
                type: "success",
              });
            }
          })
          .catch(() => {
            ElMessage({
              showClose: true,
              message: "用户名或密码错误.",
              type: "error",
            });
          });
      }
    };

    //切换到输入新密码确认新密码
    const toNewPwd = () => {
      if (state.retrieveID == "") {
        ElNotification({
          title: "Info",
          message: "Email/Phone cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (!registerCheck(state.retrieveID)) {
        ElNotification({
          title: "Error",
          message: "Email/Phone format error",
          type: "error",
          duration: 3000,
        });
      } else if (state.retrieveCapture == "") {
        ElNotification({
          title: "Info",
          message: "Capture cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (state.initPwd == "") {
        ElNotification({
          title: "Info",
          message: "newPwd cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (state.retrievePwd == "") {
        ElNotification({
          title: "Info",
          message: "retrievePwd cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (state.initPwd != state.retrievePwd) {
        ElNotification({
          title: "Error",
          message: "confirmPwd input error",
          type: "error",
          duration: 3000,
        });
      } else if (!pwdCheck(state.retrievePwd)) {
        ElNotification({
          title: "Info",
          message:
            "The password must be longer than 6 digits and consist of numbers and letters",
          type: "info",
          duration: 3000,
        });
      } else if (state.initPwd == state.retrievePwd) {
        webApi
          .forgetPassword(
            state.retrieveID,
            state.retrieveCapture,
            state.retrievePwd
          )
          .then((data) => {
            console.log(data);
            if (data.data.message == "用户信息错误") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "用户信息错误.",
                type: "error",
              });
            } else if (data.data.message == "验证码错误") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "验证码错误.",
                type: "error",
              });
            } else if (data.data.message == "重置密码成功") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "重置密码成功.",
                type: "success",
              });
              resetRetrievePwd();
              returnLogin2();
            }
          });
      }
    };

    //3D翻转切换到注册页面
    const switchRegister = () => {
      state.lostPwd = !state.lostPwd;

      domSwitchLogin.value.style.transitionDelay = ".8s";
      domSwitchRegister.value.style.transform = "rotateY(90deg)";
      domSwitchLogin.value.style.transform = "rotateY(0deg)";
      setTimeout(() => {
        domSwitchRegister.value.style.transitionDelay = ".8s";
        domSwitchLogin.value.style.transitionDelay = "0s";
      }, 800);
      setTimeout(() => {
        ElNotification({
          title: "Info",
          message:
            "The password must be longer than 6 digits and consist of numbers and letters",
          type: "info",
          duration: 5000,
          showClose: false,
        });
      }, 1600);
    };

    //跳转到找回密码
    const switchRetrievePwd = () => {
      state.lostPwd = !state.lostPwd;
      domSwitchRegister.value.style.transform = "rotateX(90deg)";
      domRetrievePwdModule.value.style.transform = "rotateX(0deg)";
      domRetrievePwdModule.value.style.transitionDelay = ".8s";
      setTimeout(() => {
        domSwitchRegister.value.style.transitionDelay = ".8s";
        domRetrievePwdModule.value.style.transitionDelay = "0s";
      }, 800);
      setTimeout(() => {
        ElNotification({
          title: "Info",
          message:
            "The password must be longer than 6 digits and consist of numbers and letters",
          type: "info",
          duration: 5000,
          showClose: false,
        });
      }, 1600);
    };

    //返回登录按钮入口
    const returnEnter = () => {
      domSwitchRegister.value.style.opacity = "0";
      setTimeout(() => {
        domEnterLoginBorder.value.style.width = "35%";
        domEnterLoginBorder.value.style.height = "5%";
        domEnterLoginBorder.value.style.border = "1px solid aqua";
        state.logining = true;
      }, 700);
    };

    //注册模块返回登录模块
    const returnLogin = () => {
      setTimeout(() => {
        state.lostPwd = !state.lostPwd;
      }, 800);
      domSwitchRegister.value.style.transform = "rotateY(0deg)";
      domSwitchLogin.value.style.transform = "rotateY(90deg)";
      setTimeout(() => {
        domSwitchLogin.value.style.transitionDelay = ".8s";
        domSwitchRegister.value.style.transitionDelay = "0s";
      }, 800);
    };

    //找回密码模块返回登录模块
    const returnLogin2 = () => {
      setTimeout(() => {
        state.lostPwd = !state.lostPwd;
      }, 800);
      domSwitchRegister.value.style.transform = "rotateX(0deg)";
      domRetrievePwdModule.value.style.transform = "rotateX(90deg)";
      setTimeout(() => {
        domRetrievePwdModule.value.style.transitionDelay = ".8s";
        domSwitchRegister.value.style.transitionDelay = "0s";
      }, 800);
    };

    //邮箱注册
    const onRegister = () => {
      if (state.registerEmail == "") {
        ElNotification({
          title: "Info",
          message: "Email/Phone cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (!registerCheck(state.registerEmail)) {
        ElNotification({
          title: "Error",
          message: "Email/Phone format error",
          type: "error",
          duration: 3000,
        });
      } else if (state.registerPassword == "") {
        ElNotification({
          title: "Info",
          message: "Password cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (!pwdCheck(state.registerPassword)) {
        ElNotification({
          title: "Info",
          message:
            "The password must be longer than 6 digits and consist of numbers and letters",
          type: "info",
          duration: 3000,
        });
      } else if (state.captcha == "") {
        ElNotification({
          title: "Info",
          message: "Capture cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else {
        webApi
          .register(state.registerEmail, state.registerPassword, state.captcha)
          .then((data) => {
            console.log(data);
            if (data.data.message == "验证码错误") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "验证码错误.",
                type: "error",
              });
            } else if (data.data.message == "用户已注册") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "用户已注册.",
                type: "error",
              });
            } else if (data.data.message == "注册成功") {
              ElMessage({
                showClose: true,
                // message: "Oops, this is a error captcha.",
                message: "注册成功.",
                type: "success",
              });
              resetRegister();
              returnLogin();
            }
          });
      }
    };

    //获取手机验证码
    const getPhoneCapture = () => {
      webApi.phoneCapture(state.registerPhone).then((data) => {
        console.log(data);
      });
    };

    //获取邮箱验证码
    const getEmailCapture = () => {
      if (state.registerEmail == "") {
        ElNotification({
          title: "Info",
          message: "Email/Phone cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (!registerCheck(state.registerEmail)) {
        ElNotification({
          title: "Error",
          message: "Email/Phone format error",
          type: "error",
          duration: 3000,
        });
      } else {
        state.regEmailisOk = true;
        let i = 60;
        let timer = setInterval(() => {
          state.CAPTURE = i--;
        }, 1000);
        setTimeout(() => {
          state.CAPTURE = "CAPTCHA";
          clearInterval(timer);
          state.regEmailisOk = false;
        }, 61 * 1000);
        webApi.emailCapture(state.registerEmail).then((data) => {
          //判断返回值boolean
          if (data.data) {
            //弹窗提示验证码成功发送
            ElNotification({
              title: "Success",
              message: "The captcha was successfully sent",
              type: "success",
            });
          } else {
            ElNotification({
              title: "Error",
              message: "This is an error message",
              type: "error",
            });
          }
          console.log(data.data);
        });
      }
    };

    //获取忘记密码的邮箱验证码
    const getEmailCapture2 = () => {
      if (state.retrieveID == "") {
        ElNotification({
          title: "Info",
          message: "Email/Phone cannot be empty",
          type: "info",
          duration: 3000,
        });
      } else if (!registerCheck(state.retrieveID)) {
        ElNotification({
          title: "Error",
          message: "Email/Phone format error",
          type: "error",
          duration: 3000,
        });
      } else {
        state.regEmailisOk = true;
        let i = 60;
        let timer = setInterval(() => {
          state.CAPTURE = i--;
        }, 1000);
        setTimeout(() => {
          state.CAPTURE = "CAPTCHA";
          clearInterval(timer);
          state.regEmailisOk = false;
        }, 61 * 1000);
        webApi.emailCapture(state.retrieveID).then((data) => {
          //判断返回值boolean
          if (data.data) {
            //弹窗提示验证码成功发送
            ElNotification({
              title: "Success",
              message: "The captcha was successfully sent",
              type: "success",
            });
          } else {
            ElNotification({
              title: "Error",
              message: "This is an error message",
              type: "error",
            });
          }
          console.log(data.data);
        });
      }
    };

    //获取所有的用户
    const getAllUsers = () => {
      webApi.allUsers().then((data) => {
        console.log(data);
      });
    };

    //重置输入->登录页
    const resetLogin = () => {
      state.uId = "";
      state.uPassword = "";
    };
    //重置输入->注册页
    const resetRegister = () => {
      state.registerPhone = "";
      state.registerEmail = "";
      state.registerPassword = "";
      state.captcha = "";
    };
    //重置输入->找回密码页
    const resetRetrievePwd = () => {
      state.retrieveID = "";
      state.initPwd = "";
      state.retrievePwd = "";
      state.retrieveCapture = "";
    };

    return {
      resetLogin,
      resetRegister,
      resetRetrievePwd,
      toNewPwd,
      switchRetrievePwd,
      returnLogin,
      returnLogin2,
      returnEnter,
      switchRegister,
      enterLogin,
      domEnterLoginBorder,
      domSwitchRegister,
      domSwitchLogin,
      domRetrievePwdModule,
      onSubmit,
      onRegister,
      getPhoneCapture,
      getEmailCapture,
      getAllUsers,
      getEmailCapture2,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="less">
// 通用的flex居中类
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app2 {
  margin: 0;
  padding: 0;
  // height: 100%;
  height: auto;
  // background: linear-gradient(#141e30, #243b55);
  position: absolute;
  // height:auto,max-width:400px测试缩小放大排版不乱
  max-width: 400px;
  min-width: 400px;
  .flexCenter();
}

.enterLoginClass {
  border: 1px solid aqua;
  width: 35%;
  // height: 5%;
  // height: 414.48px;
  height: 37.68px;
  color: aqua;
  transition: transform 0.8s linear, width 0.8s ease, height 0.8s ease;
  // transition: all 0.6s ease-in;
  .flexCenter();
  position: relative;
  // min-width: 150px;
}

//输入框按钮样式
.opacityStyle {
  background: transparent;
  border: none;
  outline: none;
}

.Box button {
  .opacityStyle();
}
.Box input {
  transition: all 3s;
  .opacityStyle();
  width: 70%;
  right: 3%;
  height: 50%;
  position: relative;
  color: aliceblue;
  border-bottom: 1px solid rgb(250, 244, 244);
  &:focus + label,
  &:valid + label {
    top: -40%;
    font-size: 70%;
  }
}

.item {
  display: flex;
  height: 10%;
  width: 100%;
  margin: 2% 0;
  position: relative;
  top: 8%;
  flex-direction: row-reverse;
  justify-content: start;
}
.item-Lostpwd {
  .item();
}

.item label {
  position: relative;
  width: 10%;
  text-align: center;
  left: 7%;
  top: 0%;
  user-select: none;
  transition: all 0.5s linear;
  z-index: -100;
}

.Box {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}
.loginBox {
  .Box();
}
.registerBox {
  .Box();
}
.retrievePwdBox {
  .Box();
  position: relative;
}

//登录页初态
.loginModule {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.8s linear, width 0.8s ease, height 0.8s ease,
    opacity 0.8s ease;
  .flexCenter();
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 5% 0;
  box-shadow: 0px 2px 5px 4px black;
}

//注册页初态
.registerModule {
  position: relative;
  transform: rotateY(90deg);
  transition: all 0.8s linear;
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 5% 0;
  box-shadow: 0px 2px 5px 4px black;
}

//找回密码
.retrievePwdModule {
  transform: rotateX(90deg);
  transition: all 0.8s linear;
  z-index: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 5% 0;
  box-shadow: 0px 2px 5px 4px black;
}

.webHeader {
  margin: 5% 0;
  padding: 0 6%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 10%;
  width: 100%;
  font-size: 200%;
}
.iconBox {
  height: 100%;
  width: 40%;
  .el-icon-top-left {
    &::before {
      cursor: pointer;
    }
    &:active {
      transform: scale(0.9, 0.9);
    }
  }
  .el-icon-refresh-right {
    &::before {
      cursor: pointer;
    }
    &:active {
      transform: scale(0.9, 0.9);
    }
  }
}

.iconBox i {
  position: relative;
  padding-left: 15%;
  left: 20%;
  height: 100%;
  width: 25%;
}

.loginingBox {
  width: 100%;
  height: 100%;
  cursor: pointer;
  .flexCenter();
}

.loginButtonBox {
  display: flex;
  width: 100%;
  height: 25%;
  top: 2%;
  position: relative;
  .loginButton {
    color: rgb(211, 220, 228);
    position: absolute;
    left: 7%;
    bottom: 0%;
    width: 40%;
    height: 50%;
    overflow: hidden;
    &:hover {
      background: #03e9f4;
      border-radius: 5px;
      color: #fff;
      box-shadow: 0 0 5px 0 #03e9f4, 0 0 25px 0 #03e9f4, 0 0 50px 0 #03e9f4;
      cursor: pointer;
    }
    &:active {
      transform: scale(0.9, 0.9);
    }
    span {
      position: absolute;
    }
    & > span:nth-child(1) {
      width: 100%;
      height: 2px;
      background: -webkit-linear-gradient(left, transparent, #03e9f4);
      left: -100%;
      top: 0;
      animation: line1 1s linear infinite;
    }
    @keyframes line1 {
      50%,
      100% {
        left: 100%;
      }
    }
    & > span:nth-child(2) {
      width: 2px;
      height: 100%;
      background: -webkit-linear-gradient(top, transparent, #03e9f4);
      right: 0;
      top: -100%;
      animation: line2 1s 0.25s linear infinite;
    }
    @keyframes line2 {
      50%,
      100% {
        top: 100%;
      }
    }
    & > span:nth-child(3) {
      width: 100%;
      height: 2px;
      background: -webkit-linear-gradient(left, transparent, #03e9f4);
      left: 100%;
      bottom: 0;
      animation: line3 1s 0.5s linear infinite;
    }
    @keyframes line3 {
      50%,
      100% {
        left: -100%;
      }
    }
    & > span:nth-child(4) {
      width: 2px;
      height: 100%;
      background: -webkit-linear-gradient(top, transparent, #03e9f4);
      left: 0;
      top: 100%;
      animation: line4 1s 0.75s linear infinite;
    }
    @keyframes line4 {
      50%,
      100% {
        top: -100%;
      }
    }
  }
  .loginButton-Confirm {
    .loginButton();
  }
}

.v-enter-active {
  transition: all 1s ease-out;
  transition-delay: 1s;
}

.v-enter-from {
  transition-delay: 1s;
  transform: translateX(30px);
  opacity: 0;
}

.switchBox {
  position: absolute;
  left: 7%;
  bottom: 10%;
  font-size: 50%;
  width: 100%;
  height: 10%;
  label {
    display: flex;
    width: 100%;
    height: 50%;
    text-decoration: underline;
    span:hover {
      cursor: pointer;
      color: rgb(125, 142, 238);
    }
  }
}
.register-email-button {
  width: 50%;
  height: 90%;
  border: 1px solid !important;
  color: #c3d4dc;
  position: relative;
  left: 11%;
  bottom: 20%;
  font-weight: 500;
  background-color: #335656;
  padding: 5% 5%;
  &:hover {
    cursor: pointer;
    background-color: aqua;
    color: black;
  }
  &:active {
    color: rgb(80, 142, 192);
    transform: scale(0.9, 0.9);
  }
}

.disabledEmailButton {
  // cursor: not-allowed !important;
  pointer-events: none;
}
</style>